<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        ref="table"
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableColumn="tableColumn"
        :minSearchLabelWidth="86"
        requestName="searchHandle"
        :tableData="tableData"
        @edit="operateHandle($event, 'edit')"
        @view="operateHandle($event, 'view')"
        @export="operateHandle($event, 'export')"
      />
    </div>

    <TrDetail
      v-model="isShowDetailPopup"
      popupTitle="查看详情"
      :leftList="detailList"
      statusModel="hidden"
      :width="1227"
      :label-width="86"
      :detailData="detailData"
      :footerList="footerList"
      @close="closeDetailPopup"
    >
      <template #bomTable>
        <TrTable
          isPopup
          v-model="bomSearchParams"
          :tableData="bomTableData"
          :total="bomTotal"
          :tableColumn="bomTableColumn"
          requestName="getBomListHandle"
        />
      </template>
    </TrDetail>
  </div>
</template>

<script>
import {
  getList,
  getDetail,
  getEnum,
  getDetailTable,
} from "@/api/logistics/purchaseOrder";
import { getColor } from "@/utils/billColor";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";

export default {
  components: {
    TrTable,
    TrDetail,
  },
  data: () => ({
    tableColumn: [
      {
        type: "text",
        label: "单据编号",
        value: "purcOrderCode",
      },
      {
        type: "text",
        label: "状态",
        value: "stateName",
      },
      {
        type: "text",
        label: "ERP状态",
        value: "erpStateName",
      },
      {
        type: "text",
        label: "供应商编码",
        value: "supplierCode",
      },
      {
        type: "text",
        label: "供应商名称",
        value: "supplierName",
      },
      {
        type: "text",
        label: "采购部门",
        value: "purcDeptName",
      },
      {
        type: "text",
        label: "采购业务员",
        value: "purcUserName",
      },
      {
        type: "text",
        label: "业务日期",
        value: "bizTime",
      },
      {
        type: "text",
        label: "备注",
        value: "remark",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "修改人员",
        value: "updateUserName",
      },
      {
        type: "text",
        label: "修改时间",
        value: "updateTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 60,
        showBtnList: [
          {
            label: "查看",
            option: "view",
          },
        ],
      },
    ],
    searchHideList: [
      {
        id: "purcOrderCode",
        type: "input",
        width: 33.33,
        label: "单据编码",
        value: "",
      },
      {
        id: "stateList",
        type: "multiSelect",
        width: 33.33,
        label: "状态",
        list: [],
        value: null,
      },
      {
        id: "purcUserName",
        type: "input",
        width: 33.33,
        label: "采购业务员",
        value: "",
      },
      {
        id: "purcDeptName",
        type: "input",
        width: 33.33,
        label: "采购部门",
        value: "",
      },
      {
        id: "supplierCode",
        type: "input",
        width: 33.33,
        label: "供应商编码",
        value: "",
      },
      {
        id: "supplierName",
        type: "input",
        width: 33.33,
        label: "供应商名称",
        value: "",
      },

      {
        startStr: "updateTimeStart",
        endStr: "updateTimeEnd",
        id: "modifyTime",
        type: "daterange",
        width: 80,
        label: "修改时间",
        value: [],
        timePeriod: true,
        radio: -1,
      },
      {
        startStr: "bizTimeStart",
        endStr: "bizTimeEnd",
        id: "busTime",
        type: "daterange",
        width: 80,
        label: "业务时间",
        value: [],
        timePeriod: true,
        radio: -1,
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        timePeriod: true,
        radio: 1,
      },
    ],
    btnList: [
      {
        label: "导出",
        option: "export",
        color: "blue",
      },
    ],
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
    },
    totalNum: 0,

    detailData: {},
    isShowDetailPopup: false,
    footerList: [
      {
        label: "关闭",
        option: "close",
        color: "blue",
      },
    ],
    detailList: [
      {
        type: "text",
        label: "基础信息",
        list: [
          {
            width: 33.33,
            text: "单据编号",
            id: "purcOrderCode",
          },
          {
            width: 33.33,
            text: "状态",
            id: "stateName",
          },
          {
            width: 33.33,
            text: "供应商编码",
            id: "supplierCode",
          },
          {
            width: 33.33,
            text: "供应商名称",
            id: "supplierName",
          },
          {
            width: 33.33,
            text: "采购部门",
            id: "purcDeptName",
          },
          {
            width: 33.33,
            text: "采购业务员",
            id: "purcUserName",
          },
          {
            width: 33.33,
            text: "业务日期",
            id: "bizTime",
          },
          {
            width: 33.33,
            text: "备注",
            id: "remark",
          },
          {
            width: 33.33,
            text: "创建人员",
            id: "createUserName",
          },
          {
            width: 33.33,
            text: "创建时间",
            id: "createTime",
          },
          {
            width: 33.33,
            text: "修改人员",
            id: "updateUserName",
          },
          {
            width: 33.33,
            text: "修改时间",
            id: "updateTime",
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "采购明细",
      },
    ],
    bomSearchParams: {
      current: 1,
      size: 10,
    },
    bomTotal: 0,
    bomTableColumn: [
      {
        type: "text",
        label: "行号",
        value: "lineNo",
      },
      {
        type: "text",
        label: "ERP状态",
        value: "erpStateName",
      },
      {
        type: "text",
        label: "物料编码",
        value: "materialCode",
      },
      {
        type: "text",
        label: "物料名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "物料规格",
        value: "materialSpec",
      },
      {
        type: "text",
        label: "采购数量",
        value: "purcNum",
      },
      {
        type: "text",
        label: "采购单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "仓库名称",
        value: "warehouseName",
      },
      {
        type: "text",
        label: "交期",
        value: "leadTime",
      },
      {
        type: "text",
        label: "待收数量",
        value: "pendingReceiptNum",
      },
      {
        type: "text",
        label: "已收数量",
        value: "receivedNum",
      },
      {
        type: "text",
        label: "收货状态",
        value: "stateName",
      },
    ],
    bomTableData: [],
  }),
  computed: {
    checkTitle() {
      const titles = {
        add: "新增",
        default: "编辑",
      };
      return titles[this.currentHandle] || titles.default;
    },
    ids() {
      let ids = [];
      this.$refs.table.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids;
    },
  },
  async mounted() {
    await this.getEnmuData();
    // this.getListHandle();
  },
  methods: {
    async getEnmuData() {
      const { data } = await getEnum(["purcOrderState"]);
      let purcOrderState = this.$findByProperty(
        this.searchHideList,
        "id",
        "stateList"
      );
      this.$set(purcOrderState, "list", data.data[0].list);
    },
    async operateHandle(val, type) {
      this.currentHandle = type;

      this.$validateData(val, 3);

      const actions = {
        view: () => this.getDetailHandle(val),
        export: () =>
          this.$exportHandle({ vm: this, params: this.searchParams }),
      };

      const action = actions[type];
      if (action) action();
    },
    async getDetailHandle(val) {
      const { data } = await getDetail(val.id);
      this.bomSearchParams.purcOrderId = val.id;
      if (data.code !== 200) return;

      this.$validateData(data.data);

      this.detailData = data.data;
      const col = this.$findByProperty(
        this.detailList,
        "id",
        "stateName",
        "list"
      );
      col.valueColor = getColor("DFT", data.data.state);
      await this.getDetailTableHandle();
      this.isShowDetailPopup = true;
    },
    async getDetailTableHandle() {
      const { data } = await getDetailTable(this.bomSearchParams);

      if (data.code !== 200) return;

      this.$validateData(data.data.records);

      this.bomTableData = data.data.records;
      this.bomTableData.forEach((item) => {
        item["stateNameColor"] = getColor("DFT", item.state);
        item.newNumUnit = `${item.purcNumUnitCode}(${item.purcNumUnitName})`;
      });
      this.bomTotal = Number(data.data.total);
    },
    closeDetailPopup() {
      this.isShowDetailPopup = false;
    },

    searchHandle() {
      this.getListHandle();
    },
    async getListHandle() {
      const { data } = await getList(this.searchParams);
      if (data.code != 200) return;
      this.$validateData(data.data);
      this.tableData = data.data.records;
      this.totalNum = Number(data.data.total);

      this.tableData.forEach((item) => {
        item["stateNameColor"] = getColor("DFT", item.state);
      });
    },
  },
};
</script>
